<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>患者数据分析</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css" th:href="@{/static/layui/css/layui.css}">

    <script src="/static/js/jquery-1.11.3.min.js" th:src="@{/static/js/jquery-1.11.3.min.js}"></script>
    <script src="/static/layui/layui.all.js" th:src="@{/static/layui/layui.all.js}"></script>
    <script src="/static/js/util.js" th:src="@{/static/js/util.js}"></script>
    <!-- 引入 echarts.js -->
    <script src="/static/js/echarts.min.js" th:src="@{/static/js/echarts.min.js}"></script>
</head>

<body>
<div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="refresh" id="ycc"><i class="layui-icon">&#xe666;</i>刷新</button>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 800px;height:400px;">
    </div>
</div>



<!--ctx-->
<script th:replace="~{fragment::ctx}"/>

<script type="text/javascript">
    var main;
    // 基于准备好的dom，初始化echarts实例
    var chart = document.getElementById('main');
    var echart = echarts.init(chart);


    $(function(){
        buildData();
    });

    //生成数据
    function buildData()
    {
        var columnLabel = ['新冠肺炎','肺结核'];
        var columnName = [];
        var columnValue = [];

        echart.showLoading();
        // 请求
        $.ajax({
            url: ctx+'api/recentGraph/getHospitalStat',
            type: 'GET',
            contentType: "application/json",
            dataType: "json",
            data: "",
            success: function (result) {
                if (result.code === 200) {
                    console.log(JSON.stringify(result.data.columnName));
                    columnName = result.data.columnName;
                    columnValue =  result.data.columnValue;

                    console.log(JSON.stringify(columnValue));

                    echart.hideLoading();
                    buildChart(columnLabel,columnName,columnValue);
                } else {
                    layer.alert(result.message);
                }
            }
        });
    }

    //生成图形
    function buildChart(columnLabel,columnName,columnValue)
    {

        var option = {
            title: {
                text: '所有隔离者-重点传染病统计'+'\n'+'(横轴：隔离者开始隔离日期)'
            },
            tooltip : {
                trigger: 'axis',
                axisPointer : {
                    type : 'shadow'
                }
            },
            toolbox: {
                show : true,
                feature : {
                    saveAsImage : {show: true}
                }
            },
            legend: {
                data:columnLabel
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    min:0,
                    type : 'category',
                    data : columnName
                }
            ],
            yAxis : [
                {
                    min:0,
                    type : 'value'
                }
            ],
            series : columnValue
        };

        echart.setOption(option);
    }


    $('#ycc').click(function(){
        buildData();
    });



</script>


</body>

</html>